<template>
  <div class="content-right-wrap">
    <div class="top-wrap">
      <Card>
        <div slot="title">
          <div class="fl">日用气规律</div>
          <div class="fr">
            <Button size="small" type="info" :loading="saveBtnLoading" @click="handleSave">保存</Button>
          </div>
        </div>
        <div class="info-wrap">
          <rgith-top-item
            v-for="(item, index) of RYQGLList"
            :key="index"
            :index="index"
            :content="item"
            @deleteItem="handleDeleteItem"
          />
          <cycle-list :mainList="mainList" :secList="secList" />
        </div>
      </Card>
    </div>
    <div class="bottom-wrap">
      <Card :bordered="false">
        <div slot="title">
          详情
        </div>
        <div class="detail-box">
          <meter-detail
            :id="id()"
            :currentMeterId="currentMeterId"
            :content="meterDetail"
            :columnNames="meterDetailColumns"
          />
        </div>
      </Card>
    </div>
  </div>
</template>
<script>
import { nanoid } from 'nanoid'
import { filter, min, max } from 'lodash'
import { createNamespacedHelpers } from 'vuex'
import meterDetailColumns from './meterDetailColumns'
import RgithTopItem from '../RightTopItem'
import CycleList from '../CycleList'
const { mapState, mapActions } = createNamespacedHelpers('tablesDay')

export default {
  name: 'tables-day-right',
  components: {
    RgithTopItem,
    CycleList,
    MeterDetail: () => import('@/commons/MeterDetail')
  },
  data() {
    return {
      saveBtnLoading: false,
      mainList: [],
      secList: []
    }
  },
  watch: {
    ZQMSList() {
      this.filterList()
    }
  },
  computed: {
    ...mapState(['currentMeterId', 'meterDetail', 'RYQGLList', 'ZQMSList', 'selecteType']),
    id() {
      return nanoid
    },
    meterDetailColumns() {
      return meterDetailColumns
    },
    mainShowList() {
      return []
    },
    secShowList() {
      return []
    }
  },
  methods: {
    ...mapActions(['changeRYQGLList', 'loadSaveParams']),
    handleDeleteItem(index) {
      this.changeRYQGLList(index)
    },
    async handleSave() {
      if (!this.currentMeterId) {
        return this.$Notice.warning({
          title: '提示信息',
          desc: '没有可操作的表具'
        })
      }
      if (this.RYQGLList.length < 1) {
        return this.$Notice.warning({
          title: '提示信息',
          desc: '没有可保存的数据'
        })
      }

      this.saveBtnLoading = true
      const { code, msg } = await this.loadSaveParams({
        type: 'clustering',
        text: JSON.stringify(this.RYQGLList)
      })
      this.saveBtnLoading = false
      if (code === 200) {
        this.$Message.success(msg)
      } else {
        this.$Message.error(msg)
      }
    },
    filterMaxAndMin(list) {
      const _min = min(list)
      const _max = max(list)
      return {
        min: _min,
        max: _max
      }
    },
    filterAvg(list) {
      const _minList = []
      for (let i = 1; i < list.length - 1; i++) {
        const _cItem = list[i]
        if (_cItem <= list[i - 1] && _cItem <= list[i + 1]) {
          _minList.push(i)
        }
      }
      if (_minList.length >= 2) {
        return _minList[1] - _minList[0]
      }
      return 0
    },
    filterList() {
      const _mainList = []
      const _secList = []
      filter(this.ZQMSList, (item, index) => {
        const { name, value } = item
        const { min, max } = this.filterMaxAndMin(value)
        const avg = this.filterAvg(value)
        const _data = {
          name,
          min,
          max,
          avg,
          value
        }
        if (name === 'main') {
          _mainList.push(_data)
        } else {
          _secList.push(_data)
        }
      })

      this.mainList = _mainList
      this.secList = _secList
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';

.content-right-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .top-wrap {
    flex: 1;
    margin-bottom: 10px;
    overflow: hidden;

    @{deep}.ivu-card-body {
      overflow: hidden;
    }
  }
  .info-wrap {
    padding: 0 10px;
    height: 100%;
    overflow-y: auto;
  }
  .detail-box {
    padding: 0 10px;
  }
}
</style>
